<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head >
    <meta charset="UTF-8">
    <!--移动端浏览 viewport移动端浏览   width表示可视区域 initial-scale首次浏览 无缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <Title>分类管理</Title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}" >
</head>

<body>
    <!-- 导航 -->
    <nav th:replace="admin/Afragments::menu(2)"></nav>
    <!-- 二级导航 -->
    <div class="ui attached secondary pointing teal menu basic me-border-hidden">
        <div class="ui container">
            <div class="right menu basic">
                <a href="#"  th:href="@{/admin/types}" class="active item">列表</a>
                <a href="#" th:href="@{/admin/types/input}" class="item">发布</a>
            </div>
        </div>
    </div>
   
        
    

    <!-- 中间内容 -->
    <div class="me-padded-tb-large">
        <!-- container可以自动响应布局 -->
        <div class="ui container">
            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                <i class="close icon"></i>
                <div class="header">提示：</div>
                <p th:text="${message}">恭喜，操作成功！wulala</p>
            </div>

            <table class="ui table ">
                <thead>
                    <tr>
                        <th></th>
                        <th>分类</th>
                        <th>使用博客数量</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="type,iterStat : ${page.getRecords()}">
                        <td th:text="${iterStat.count}">1</td>
                        <td th:text="${type.name}">刻意练习清单</td>
                        <td th:text="${type.blogSize}">刻意练习清单</td>
                        <td th:text="${#dates.format(type.createTime, 'yyyy-MM-dd HH:mm:ss')}">刻意练习清单</td>
                        <td th:text="${#dates.format(type.updateTime, 'yyyy-MM-dd HH:mm:ss')}">刻意练习清单</td>
                        <td>
                            <a href="#" th:href="@{/admin/types/{id}/input(id=${type.id})}" class="ui  teal  button">编辑</a>
                            <a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}" class="ui  red  button">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <!-- colspan是合并单元格 -->
                        <th colspan="6">
                            <div class="ui  pagination menu" >
<!--                                th:href="@{/admin/types/page=${page.getCurrent()-1}"-->
                                <a  class=" item" th:href="@{/admin/types}" th:if="${page.current!=1}">首页</a>
                                <a  class=" item" th:href="@{/admin/types(page=${page.current-1})}" th:if="${page.hasPrevious()}">上一页</a>
                                <a  class=" item" th:href="@{/admin/types(page=${page.current+1})}" th:if="${page.hasNext()}">下一页</a>
                                <a  class=" item" th:href="@{/admin/types(page=${page.pages})}" >尾页</a>
                            </div>
                            <a href="#" th:href="@{/admin/types/input}"  class="ui right floated teal basic button">新增</a>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>

    </div>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <!-- 底部栏 -->
    <footer   th:fragment="footer" class="ui inverted vertical segment me-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../../static/image/wechat.png" alt="" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">算法竞赛进阶指南 </a>
                        <a href="#" class="item">分布式协调系统 zookeeper</a>
                        <a href="#" class="item">消息队列 kafka</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">联系方式</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email:yrq991121@163.com</a>
                        <a href="#" class="item">QQ:1193700079</a>
                        <a href="#" class="item">Github</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header">网站简介</h4>
                    <p>我的个人技术博客，练习一下Springboot，对于后端技术主要是操作系统和数据库这一块的理论知识，做网页纯属技术爱好，前端技术主要是UI设计，用户交互，要具备优秀的艺术欣赏水平，偶尔接私活，需要的微信扫码加我联系
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider">
            </div>
            <p class="m-text-lined m-text-spaced m-text-thin m-opacity-mini">Copyright @ 2020 - 2021 Blog_Daniel
                Designed by yrq
                <br>
                来自华北理工大学的技术宅
            </p>
        </div>


    </footer>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

    <script>
        $('.menu.toggle').click(function () {
            $('.me-item').toggleClass('me-mobile-hide');
        });

        $('.ui.user.dropdown').dropdown({
            on: 'hover'
        });
        $('.ui.blog.dropdown').dropdown({
            on: 'hover'
        });
        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });
    </script>
</body>

</html>